{extend name="common/base_page" /}

{block name="title"}消息中心{/block}

{block name="jscssfile"}{/block}

{block name="css"}
<style type="text/css"></style>
{/block}

{block name="body"}
  <div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
      <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title msgtype-list">
          <li class="layui-this" data-type="ALL">全部消息</li>
          {volist name="msg_type_list" id="vo"}
            {if $vo.no_read_count gt 0}
              <li data-type="{$vo.id}">{$vo.name}<span class="layui-badge">{$vo.no_read_count}</span></li>
            {else}
              <li data-type="{$vo.id}">{$vo.name}</li>
            {/if}
          {/volist}
        </ul>
        <div class="layui-tab-content" style="padding-bottom:0;">
          <div class="layui-tab-item layui-show">
            <div class="LAY-app-message-btns">
              <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="del">删除</button>
              <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="ready">标记已读</button>
              <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="readyAll">全部已读</button>
              <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="all" data-events="newmsg" style="float: right;">发新消息</button>
            </div>
          </div>
        </div>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">

              <table class="layui-hide" id="admin-message-table" lay-filter="admin-message-table"></table>

            </div>
        </div>
      </div>
    </div>
  </div>
{/block}

{block name="script"}
<script type="text/html" id="toolbarDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-edit"></i>查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<script type="text/javascript">
var _p = 1, _msgType = 'ALL', myFun = null;
$(function(){
  $('.msgtype-list li').click(function(){
      var _tag = $(this).data('type');
      if(_tag != _msgType)
      {
        _msgType = _tag; 
        $(this).addClass('layui-this');
        $(this).siblings().removeClass('layui-this');
        _loadList();
      }
  });

  setTimeout(function(){
    _loadList();
  },50);

  myFun = {
    del: function(e, t) {
        var idsArr = laytable.checkStatus('admin-message-table').data;
        if(idsArr.length <= 0)
        {
          layer.msg('请先选择列表中的条目再继续', {time: 2000,anim: 4});
          return false;
        }
        var myArr = [];
        idsArr.forEach((elem, index) => {
          myArr.push(elem.id);
        });
        layer.confirm('您确定要删除选中的数据吗？', {
            title:'删除',shade:[0.4,'#000000'],btn: ['确定','取消'] //按钮
        }, function(){
            layer.closeAll();
            _Index.ajax("{:url('index/admin_message/del')}",{id:myArr.join()},function(d){
                if(d.err == 0)
                {
                  layer.msg(d.msg, {time: 1000},function(){
                      laytable.reload('admin-message-table');
                  });
                }else{
                  layer.msg(d.msg, {time: 2000,anim: 4});
                }
            },'请稍候...');
        });
    },
    ready: function(e, t) {
        var idsArr = laytable.checkStatus('admin-message-table').data;
        if(idsArr.length <= 0)
        {
          layer.msg('请先选择列表中的条目再继续', {time: 2000,anim: 4});
          return false;
        }
        var myArr = [];
        idsArr.forEach((elem, index) => {
          myArr.push(elem.id);
        });
        layer.confirm('您确定要设置已读选中的数据吗？', {
            title:'提示',shade:[0.4,'#000000'],btn: ['确定','取消'] //按钮
        }, function(){
            layer.closeAll();
            _Index.ajax("{:url('index/admin_message/set_status')}",{tag:'ready',id:myArr.join()},function(d){
                if(d.err == 0)
                {
                  layer.msg(d.msg, {time: 1000},function(){
                      laytable.reload('admin-message-table');
                  });
                }else{
                  layer.msg(d.msg, {time: 2000,anim: 4});
                }
            },'请稍候...');
        });
    },
    readyAll: function(e, t) {
        layer.confirm('您确定要全部已读所有消息吗？', {
            title:'提示',shade:[0.4,'#000000'],btn: ['确定','取消'] //按钮
        }, function(){
            layer.closeAll();
            _Index.ajax("{:url('index/admin_message/set_status')}",{tag:'readyall',id:''},function(d){
                if(d.err == 0)
                {
                  layer.msg(d.msg, {time: 1000},function(){
                      laytable.reload('admin-message-table');
                  });
                }else{
                  layer.msg(d.msg, {time: 2000,anim: 4});
                }
            },'请稍候...');
        });
    },
    newmsg: function(e, t) {
        layer.prompt({title:'发送新消息', shade:[0.4,'#000000'], formType: 2}, function(text, index){
            layer.close(index);
            layer.msg('此功能暂不开放', {time: 2000,anim: 4});
        });
    }
  };
});

function aLink(e)
{
  return '<a href="{:url('index/admin_message/detail')}?id=' + e.id + '">' + e.msg_title + '</a>';
}

//加载数据
function _loadList()
{
  __showLoadingBox('请稍候...');
  laytable.render({
      elem: '#admin-message-table'//指定表格元素
      ,url:"{:url('index/admin_message/index')}"
      ,method:'post'  //提交方式
      ,where:{mtype:_msgType,page:_p} //post json数据
      ,page: {layout: ['count', 'prev', 'page', 'next', 'skip'],first: true,last: true}
      //,height: 'full-50'
      ,skin: 'line '  //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
    　,even: true    //隔行换色
      ,limit: 20     //每页默认显示的数量
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,cols: [[
        {type:'checkbox'}
        ,{field:'id', width:80, title: 'ID', sort: true}
        ,{field:'msg_title', minwidth:280, title: '标题', templet: aLink}
        ,{field:'create_time', width:180, title: '时间',sort: true}
        ,{fixed: 'right', width: 150, align:'center', title: '操作', toolbar: '#toolbarDemo'}
      ]]
      ,done:function(datalist,curr,page){
          __hideLoadingBox();
      }
  });
  $(".LAY-app-message-btns .layui-btn").on("click", function() {
        var e = $(this) , i = e.data("events") , l = e.data("type");
        myFun[i] && myFun[i].call(this, e, l)
  });

  laytable.on('tool(admin-message-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
      var _data = obj.data; //获得当前行数据
      var _event = obj.event; //获得 lay-event 对应的值
      if(_event === 'detail'){ //查看
          window.location.href = "{:url('index/admin_message/detail')}?id=" + _data.id;
      }
      if(_event === 'del'){ //删除
        layer.confirm('您确定要删除本条数据吗？', {
            title:'删除',shade:[0.4,'#000000'],btn: ['确定','取消'] //按钮
        }, function(){
            layer.closeAll();
            _Index.ajax("{:url('index/admin_message/del')}",{id:_data.id},function(d){
                if(d.err == 0)
                {
                  layer.msg(d.msg, {time: 1000},function(){
                      laytable.reload('admin-message-table');
                  });
                }else{
                  layer.msg(d.msg, {time: 2000,anim: 4});
                }
            },'请稍候...');
        });
      }
  });
}
</script>
{/block}
</body>
</html>